<div class="card mb-4">
    <div class="card-header">
        Category
    </div>
    <div class="card-body" ng-init="$ctrl.loadData()">
        <div class="row">
            <div class="col-12">
                <input type="text" placeholder="Enter new category then press enter to create new one"
                    ng-model="$ctrl.newTitle" ng-enter="$ctrl.createData()"/>
            </div>
        </div>
        <div class="row">
            <div class="col-12" ng-repeat="item in $ctrl.selectedList">
                <checkbox-switch data="item" callback="$ctrl.select(data)" description="item.data[$ctrl.fieldDisplay]">
                </checkbox-switch>
            </div>
        </div>
        <div class="row">
            <div  class="col-12" ng-repeat="item in $ctrl.data.items" ng-hide="item.disabled">
                <checkbox-switch data="item" callback="$ctrl.select(data)" description="item.data[$ctrl.fieldDisplay]">
                </checkbox-switch>
            </div>
        </div>
    </div>
    <div class="card-footer">
        <paging class="small" page="$ctrl.data.page" page-size="$ctrl.data.pageSize" total="$ctrl.data.totalItems"
            ul-class="pagination justify-content-end m-0" a-class="page-link" paging-action="$ctrl.loadPosts(page-1)"
            scroll-top="true">
        </paging>
    </div>
</div>